<template>
  <div class="collection-container">
    <!-- 如果没有子页面被选中，显示我的收藏 -->
    <div v-if="!showSubPage" class="main-collection">
      <div class="top">
        <div class="title">我的收藏</div>
      </div>

      <div class="search-section">
        <el-input
          v-model="searchQuery"
          placeholder="Search..."
          class="search-input"
        >
          <template #suffix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-button class="menu-button">
          <el-icon><Menu /></el-icon>
        </el-button>
      </div>

      <div class="collection-grid">
        <!-- 作品收藏卡片 -->
        <div class="collection-card" @click="navigateTo('works')">
          <div class="card-stack">
            <div class="card-image">
              <img src="../assets/worklist_test.png" alt="兰亭集序" />
            </div>
          </div>
          <div class="card-info">
            <div class="card-header">
              <h3>兰亭集序</h3>
              <el-icon class="star-icon" color="#ffd700"><Star /></el-icon>
            </div>
            <p class="author">王羲之（东晋）</p>
            <div class="update-info">作品收藏</div>
            <div class="update-time">今日更新</div>
          </div>
        </div>

        <!-- 汉字收藏卡片 -->
        <div class="collection-card" @click="navigateTo('character')">
          <div class="card-stack">
            <div class="card-image">
              <img src="../assets/zi_icon.png" alt="永字" />
            </div>
          </div>
          <div class="card-info">
            <div class="card-header">
              <h3>永字</h3>
            </div>
            <p class="author">王羲之（东晋）</p>
            <div class="update-info">汉字收藏</div>
            <div class="update-time">2024-11-17更新</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 动态加载子页面 -->
    <component v-if="showSubPage" :is="currentComponent" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import CharacterCollection from '@/components/Collect/CharacterCollection.vue';
import WorksCollection from '@/components/Collect/WorksCollection.vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const showSubPage = ref(false); // 控制是否显示子页面
const selectedPage = ref<string | null>(null);

const currentComponent = computed(() => {
  if (selectedPage.value === 'works') {
    return WorksCollection;
  } else if (selectedPage.value === 'character') {
    return CharacterCollection;
  }
  return null;
});

// 根据路由更新显示状态
const updatePageState = () => {
  const path = route.path;
  if (path === '/collect') {
    showSubPage.value = false;
    selectedPage.value = null;
  } else if (path === '/collect/works') {
    showSubPage.value = true;
    selectedPage.value = 'works';
  } else if (path === '/collect/character') {
    showSubPage.value = true;
    selectedPage.value = 'character';
  }
};

// 监听路由变化
watch(
  () => route.path,
  () => {
    updatePageState();
  }
);

// 组件挂载时初始化状态
onMounted(() => {
  updatePageState();
});

const navigateTo = (page: string) => {
  router.push(`/collect/${page}`);
};

const searchQuery = ref('');
</script>
<style scoped>
/* 背景色和字体 */
body {
  background-color: #f4f7fa;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.collection-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5vh;
  width: 100%;
}

.main-collection {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: clamp(40px, 2vw, 60px);
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
}

.search-section {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 600px;
  margin-bottom: 30px;
  background-color: #fff;
  border-radius: 50px;
  padding: 5px 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
  margin-top: 40px;
}

.collection-card {
  background: white;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.collection-card:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.card-stack {
  position: relative;
  margin-bottom: 15px;
}

.card-image {
  width: 100%;
  height: 200px; /* 固定高度，方便图片展示 */
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 让图片保持比例填充容器 */
  border-radius: 8px;
}

.card-info {
  padding: 10px 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #333;
}
</style>

